<template>
  <div class="index-container">
    <div class="header-content">
      <el-row :gutter="10">
        <!--数据展示栏-->
        <el-col :span="16">
          <div class="grid-content">
            <div class="header-content-title">
              <div class="header-content-title-left">
                <el-icon size="20"><DataAnalysis /></el-icon>
                <span style="font-weight: bolder;">数据分析</span>
              </div>
            </div>
            <div class="header-content-box">
              <el-row :gutter="10">
                <el-col :lg="8">
                  <div class="project-list-top-left">
                    <span class="project-list-title">注册人数</span>
                    <div class="project-list-count">
                      <CountTo :start='0' :end='counts.totalUsers' :duration='3'></CountTo>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8">
                  <div class="project-list-top-left">
                    <span class="project-list-title">社区帖子数</span>
                    <div class="project-list-count">
                      <CountTo :start='0' :end='counts.totalArticle' :duration='3'></CountTo>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8">
                  <div class="project-list-top-left">
                    <span class="project-list-title">累计交易额</span>
                    <div class="project-list-count">
                      <CountTo :start='0' :end='counts.totalAmount' :duration='3'></CountTo>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8">
                  <div class="project-list-top-left">
                    <span class="project-list-title">入驻商户数</span>
                    <div class="project-list-count">
                      <CountTo :start='0' :end='counts.totalMerchant' :duration='3'></CountTo>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8">
                  <div class="project-list-top-left">
                    <span class="project-list-title">已运行天数</span>
                    <div class="project-list-count">
                      <CountTo :start='0' :end='daysPassed' :duration='3'></CountTo>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8">
                  <div class="project-list-top-left">
                    <span class="project-list-title">反馈次数</span>
                    <div class="project-list-count">
                      <CountTo :start='0' :end='counts.totalFeedback' :duration='3'></CountTo>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <!--快捷操作栏-->
        <el-col :span="8">
          <div class="grid-content">
            <div class="header-content-title">
              <div class="header-content-title-right">
                <el-icon size="20"><Operation /></el-icon>
                <span style="font-weight: bolder;">快捷操作</span>
              </div>
            </div>
            <div class="header-content-box">
              <el-row :gutter="10">
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('/toProduct')">
                  <el-icon class="project-list-top-right-icon" size="52"><Goods /></el-icon>
                  <span class="project-list-top-right-title">商品管理</span>
                </el-col>
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toOrder')">
                  <el-icon class="project-list-top-right-icon" size="52"><ChatLineSquare /></el-icon>
                  <span class="project-list-top-right-title">评价管理</span>
                </el-col>
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toOrder')">
                  <el-icon class="project-list-top-right-icon" size="52"><DocumentChecked /></el-icon>
                  <span class="project-list-top-right-title">订单管理</span>
                </el-col>
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toMerchant')">
                  <el-icon class="project-list-top-right-icon" size="52"><TakeawayBox /></el-icon>
                  <span class="project-list-top-right-title">商铺管理</span>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toOrder')">
                  <el-icon class="project-list-top-right-icon" size="55"><Edit /></el-icon>
                  <span class="project-list-top-right-title">反馈管理</span>
                </el-col>
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toArticles')">
                  <el-icon class="project-list-top-right-icon" size="55"><Document /></el-icon>
                  <span class="project-list-top-right-title">文章管理</span>
                </el-col>
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toCategory')">
                  <el-icon class="project-list-top-right-icon" size="55"><PriceTag /></el-icon>
                  <span class="project-list-top-right-title">分类管理</span>
                </el-col>
                <el-col :lg="5" class="project-list-top-right-item" @click="router.push('./toUsers')">
                  <el-icon class="project-list-top-right-icon" size="55"><User /></el-icon>
                  <span class="project-list-top-right-title">用户管理</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <!--图表展示栏-->
      <el-row :gutter="10">
        <el-col :span="8">
          <div ref="chartSales" class="chart-content"></div>
        </el-col>
        <el-col :span="8" >
          <div ref="chartCustomer" class="chart-content"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chartMerchant" class="chart-content"></div>
        <!-- 滚动栏 -->
<!--          <OrderScrollList ref="orderScrollRef" />-->
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="9">
<!--          <div ref="chartMerchant" class="chart-content"></div>-->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import CountTo from '../../components/index/CountTo.vue';
import * as echarts from 'echarts';
import {ECharts} from 'echarts';
import OrderScrollList from "../../components/index/OrderScrollList.vue";
import { Document, Edit, Goods, PriceTag, TakeawayBox, User } from "@element-plus/icons-vue";
import { getAllCounts } from "@/api/home";
import router from "@/router";

// 创建一个响应式引用来保存DOM元素
const chartSales = ref(null);
const chartCustomer = ref(null);
const chartMerchant = ref(null);

let chartInstance1: ECharts | null = null;
let chartInstance2: ECharts | null = null;
let chartInstance3: ECharts | null = null;

// 定义响应式的变量来存储日期和天数差
const tenDaysAgoDate = ref<string>('');
const currentDate = ref<string>('');
const daysPassed = ref<number>(0);

const calculateTenDaysAgo = () => {
  const now = new Date();
  const tenDaysAgo = new Date(now.getTime() - 10 * 24 * 60 * 60 * 1000);
  tenDaysAgoDate.value = tenDaysAgo.toLocaleDateString(); // 使用本地日期格式
  return tenDaysAgo;
};

// 计算当前日期
const calculateCurrentDate = () => {
  const now = new Date();
  currentDate.value = now.toLocaleDateString(); // 使用本地日期格式
  return now;
};

const calculateDaysPassed = (tenDaysAgo: Date, current: Date) => {
  const timeDifference = current.getTime() - tenDaysAgo.getTime();
  daysPassed.value = Math.ceil(timeDifference / (1000 * 3600 * 24));
};

// 信息统计
const counts = ref({
  totalUsers: 0,
  totalArticle: 0,
  totalAmount: 0,
  totalMerchant: 0,
  totalFeedback: 0
})


onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成

  const tenDaysAgo = calculateTenDaysAgo();
  const current = calculateCurrentDate();
  calculateDaysPassed(tenDaysAgo, current);
  // 初始化ECharts实例并设置配置项
  chartInstance1 = echarts.init(chartSales.value);
  chartInstance2 = echarts.init(chartCustomer.value);
  chartInstance3 = echarts.init(chartMerchant.value);

  const option1 = {
    title: {
      text: '用户注册量'
    },
    tooltip: {},
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月"]
    },
    yAxis: {},
    series: [{
      name: '名',
      type: 'line', // 这里可以是line、bar、pie等
      data: [120, 200, 150, 80, 70]
    }]
  };
  chartInstance1.setOption(option1);

  const option2 = {
    title: {
      text: '商品销售量'
    },
    tooltip: {},
    xAxis: {
      data: ["食品", "生鲜", "服装", "电器", "家具"]
    },
    yAxis: {},
    series: [{
      name: '数据系列',
      type: 'bar', // 这里可以是line、bar、pie等
      data: [120, 200, 150, 80, 70]
    }]
  };
  chartInstance2.setOption(option2);

  const option3 = {
    title: {
      text: '商户类别'
    },
    tooltip: {},
    series: [{
      name: '数据系列',
      type: 'pie', // 这里可以是line、bar、pie等
      radius: '60%',
      data: [
        {
          value: 335,
          name: '服装零售'
        },
        {
          value: 234,
          name: '日用家居'
        },
        {
          value: 1548,
          name: '食品生鲜'
        }
      ],
    }]
  };
  chartInstance3.setOption(option3);
});

// 获取统计数据
const fetchData = async () => {
  try {
    const res = await getAllCounts()
    if (res.code !== 200) return;
    counts.value = res.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};
fetchData();

const orderScrollRef = ref(null);

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance1 != null && chartInstance1.dispose) {
    chartInstance1.dispose();
  }
  if (chartInstance2 != null && chartInstance2.dispose) {
    chartInstance2.dispose();
  }
  if (chartInstance3 != null && chartInstance3.dispose) {
    chartInstance3.dispose();
  }
    // orderScrollRef.value?.stopScroll();
});
</script>

<style scoped>
.index-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.header-content {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.grid-content {
  padding: 10px 10px 10px 10px;
  border-radius: 4px;
  min-height: 36px;
  background: #ffffff;
}

.header-content-title {
  width: 250px;
  height: 25px;
}

.header-content-title-left, .header-content-title-right{
  display: flex;
  justify-content: left;
  align-items: center;
}

.header-content-title-left-icon-three{
  margin-top: 4px;
  width: 12px;
  height: 12px;
  font-size: 15px;
  background-color: #079871;
  margin-right: 10px;
}

.header-content-box{
  margin-top: 20px;
  margin-left: 20px;
}

.project-list-top-left {
  width: 100%;
  height: 108px;
  border-radius: 5px;
  cursor: pointer;
  padding: 14px;
  box-sizing: border-box;
  background: url('../../assets/images/middle.jpg');
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.project-list-title {
  flex: 1;
  font-weight: bolder;
  font-size: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: left;
  border-radius: 10px;
  color: #020908;
}

.project-list-count{
  flex: 1;
  font-weight: bolder;
  font-size: 30px;
  line-height: 80px;
  text-align: center;
  color: #079871;
}

.project-list-top-right-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #B2DFEE;
  padding: 5px;
  margin: 3px;
  border-radius: 10px;
}

.project-list-top-right-item:hover {
  background-color: #A4D3EE;
}

.project-list-top-right-icon {
  width: 68px;
  height: 68px;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.project-list-top-right-title {
  font-weight: bolder;
  font-size: 18px;
  color: #414ed0;
}

.chart-content{
  width: 100%;
  height: 250px;
  margin: 10px 15px 0 0;
  padding: 10px 10px 10px 10px;
  border-radius: 4px;
  min-height: 200px;
  background: #ffffff;
}
</style>